<template>
	<scroll-view style="height: 100%;" scroll-y="true">
		<view class="feedback-form speak-form" style="margin: 0px 30px;">
			<uni-forms >
				<uni-forms-item>
					<view class="label">
						<image src="https://zhzx.on-line-demo.com/image/fkbt.png" mode="heightFix" style="width: 16px;height: 16px;;margin-right: 10px;"></image>
						标题：
					</view>
					<view class="title">
						<uni-easyinput type="textarea" autoHeight v-model="formData.title" :clearable="false" placeholder="请输入"/>
					</view>
					
				</uni-forms-item>
				<uni-forms-item >
					<view class="label">
						<image src="https://zhzx.on-line-demo.com/image/xxsm.png" mode="heightFix" style="width: 16px;height: 16px;margin-right: 10px;"></image>
						内容：
					</view>
					<sp-editor :toolbar-config="{
				          excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
				          iconSize: '18px'
				        }" @init="initEditor" @input="inputOver" @upinImage="upinImage"></sp-editor>
					<!-- <uni-easyinput class="content" type="textarea" maxlength="-1" autoHeight v-model="formData.content" placeholder="请输入"></uni-easyinput> -->
				</uni-forms-item>
				<!-- <uni-forms-item style="border: none;">
					<view class="label">
						<image src="https://zhzx.on-line-demo.com/image/xxsm.png" mode="heightFix" style="width: 16px;height: 16px;margin-right: 10px;"></image>
						附件：
					</view>
					<uni-file-picker 
						v-model="imageValue" 
						fileMediatype="image" 
						mode="grid" 
						:auto-upload="false"
						@select="selectImgs" 
						@delete="removeImg"
					/>
				</uni-forms-item> -->

			</uni-forms>
			<button type="primary" class="btn delete" @click="onSubmit()" v-if="id">修改并提交</button>
			<button type="primary" class="btn delete" @click="onSubmit()" v-else>提交</button>
			
		</view>
	</scroll-view>
</template>

<script>
	import request from '../../../common/request.js'
	import upload from '../../../common/upload.js'
	export default {
		props:['id'],
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		data() {
			return {
				formData:{
					title:'',
					content: '',
				},
				timeout: null,
				
					imageValue:[],
					uploadImages:[],
			}
		},
		beforeDestroy() {
			if(this.timeout){
				clearTimeout(this.timeout)
			}
		},
		mounted(){
			if(this.id){
				this.getDetailData()
			}
		},
		methods: {
			/**
			 * 获取输入内容
			 * @param {Object} e {html,text} 内容的html文本，和text文本
			 */
			 inputOver(e) {
				// 可以在此处获取到编辑器已编辑的内容
				// console.log('==== inputOver :', e)
				this.formData.content = e.html
			},
			/**
			 * 编辑器就绪
			 * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
			 * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
			 * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
			 */
			initEditor(editor) {
				console.log(editor)
				this.editorIns = editor // 保存编辑器实例
				// 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
				this.preRender()
			},
			preRender(html) {
				setTimeout(() => {
					// 异步获取后端数据后，初始化编辑器内容
					this.editorIns.setContents({
						html: html
					})
				}, 1000)
			},
			/**
			 * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
			 * @param {Object} tempFiles
			 * @param {Object} editorCtx
			 */
			upinImage(tempFiles, editorCtx) {
				tempFiles.forEach(async (item) => {
					upload({
						url:'/common/upload',
						file: item.tempFilePath
					}).then(res => {
						res = JSON.parse(res)
						if(res.code == 1){
							editorCtx.insertImage({
								src: res.data.fullurl,
								width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
								success: function() {
									// uni.hideLoading()
								}
							})
						}else{
							uni.showToast({
								title: '图片上传失败',
								icon: 'none',
								duration: 2000
							});
						}
					})
				})

			},
			getDetailData(){
				request({
					url:'/study/feelDetail',
					data:{
						feel_id: this.id
					},
					method: 'POST'
				}).then(res => {
					if(res.code == 1){
						this.formData = res.data
						this.preRender(res.data.content)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			selectImgs(data){
				// console.log(data)
				this.uploadImages = this.uploadImages.concat(data.tempFilePaths)
			},
			removeImg(data){
				this.uploadImages = this.uploadImages.filter(item => item != data.tempFilePath)
				this.imageValue = this.imageValue.filter(item => item.url != data.tempFilePath)
				// console.log(this.uploadImages)
			},
			imageUpload() {
				let tasks = []
				this.uploadImages.forEach(url => {
					tasks.push(
						upload({
							url:'/common/upload',
							file: url
						})
					);
				})
				return Promise.all(tasks);
			},
			async onSubmit(){
				if(!this.formData.title){
					uni.showToast({
						title: '标题不能为空',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				if(!this.formData.content){
					uni.showToast({
						title: '内容不能为空',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				let images = []
				if(this.uploadImages.length > 0){
					let uploadImages = await this.imageUpload()
					uploadImages.forEach(item => {
						let imgData = JSON.parse(item)
						if(imgData.data.url) images.push(imgData.data.url)
					})
				}
				if(this.imageValue.length > 0){
					this.imageValue.forEach(item => {
						let path = item.url.split('/uploads')
						let uploadUrl = (path[1] && ('/uploads' + path[1])) || ''
						images.push(uploadUrl)
					})
				}
				this.formData.meet_files = images.join(',')
				if(this.id){
					let param = {
						feel_id: this.id,
						title: this.formData.title,
						content: this.formData.content,
						meet_files: this.formData.meet_files
					}
					request({
						url:'/study/editFeel',
						data: param,
						method: 'POST'
					}).then(res => {
						if(res.code == 1){
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
							this.timeout = setTimeout(() => {
								let data = {
									page: 'form'
								}
								uni.$emit('showContent', data)
							}, 2000)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}else{
					request({
						url:'/study/addFeel',
						data:this.formData,
						method: 'POST'
					}).then(res => {
						if(res.code == 1){
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
							this.timeout = setTimeout(() => {
								let data = {
									page: 'form'
								}
								uni.$emit('showContent', data)
							}, 2000)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			
		}
	}
</script>

<style scoped>
	::v-deep .uni-form-item:nth-child(3){
		border: none;
	}
	.title .uni-easyinput__content-textarea{
		min-height: 20px !important;
	}
	.feedback-form{
		padding: 30px 0px 20px;
	}
	.label{
		font-size: 16px;
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	
	.btn{
		margin-bottom: 15px;
		font-size: 14px;
		padding: 5px;
		border-radius: 8px;
	}
	.btn.delete{
		background-color: #2C60BE;
		margin-top: 60px;
	}
</style>